<template>
    <div>
          <el-tabs type="border-card" @tab-click="change">
            <el-tab-pane label="阅读量" >
                <p v-for="(item,key) in mes" :key="key">
                    <router-link v-bind:to="'/show?id='+item.id">{{item.title}}</router-link>
                </p>
            </el-tab-pane>

            <el-tab-pane label="评论量" >
                <p v-for="(item,key) in mes" :key="key">
                    <router-link v-bind:to="'/show?id='+item.id">{{item.title}}</router-link>
                </p>
            </el-tab-pane>
            </el-tabs>
    </div>
    <el-tabs v-model="nowcate" @tab-click="xhqn">
            <el-tab-pane v-for="(it,k) in cate" :key="k"  :label="it.name" :name="it.id">
                <el-table :data="messlist" style="width: 100%">
                    <el-table-column prop="title" label="标题" width="180" />
                    <el-table-column prop="content" label="内容" width="180" />
                    <el-table-column prop="addtime" label="时间" width="180" />
                    <el-table-column prop="read" label="阅读量" width="180" />
                    <el-table-column prop="write" label="评论量" width="180" />
                    <el-table-column prop="ca" label="分类" width="180" />
                </el-table>
            </el-tab-pane>
    </el-tabs>
    
</template>
<script setup>
import {ref,onMounted} from "vue"
import axios from "axios"

let query=ref("read")//read  wirte
let mes=ref([])
let cate=ref([])
let nowcate=ref([])
let messlist=ref([])


// 拿到分类数据
const getcate=()=>{ 
    axios.get("http://127.0.0.1:8000/api/fen/").then(res=>{
    cate.value=res.data
    nowcate.value=cate.value[0].id
})
}


const getdata=()=>{
    axios.get(`http://127.0.0.1:8000/api/news/?order=${query.value}`).then(res=>{
        console.log(res)
        mes.value=res.data.data
    })
}

onMounted(()=>{
    getdata()
    getcate()

})

const change=(id)=>{
    alert("切换")
    query.value=query.value=="read"?"write":"read"
    getdata(id)
}

const xhqn=(el)=>{
    axios.get(`http://127.0.0.1:8000/api/xx/?id=`+el.props.name).then(res=>{
        messlist.value=res.data.data
        

    })
}
</script>